var LangEdit = Class.create({
	initialize: function()
	{
        if (!$('le_wrapper'))
        {
            $(document.body).insert('<div id="le_wrapper" style="display:none"><div id="le_handler">Edit</div><div id="le_frame"></div></div>');
            var me = this;
            $('le_handler').observe('click', function(){
                me.beginedit($('le_wrapper').hide().e);
            });
            $('le_wrapper').observe('mouseover', function(){
                this.show();
            }).observe('mouseout', function(){
                this.hide();
            });
        }

		$$('.langEdit').each(function(e){
            if (e.le) return;
			e.observe('mouseover', function(){
                e.le = true;
				var h = 0;
				var w = this.getWidth()+35;
				$('le_frame').setStyle({width:w+'px',height:h+'px'});

				var offset = this.cumulativeOffset();
				var x = offset[0]-35;
				var y = offset[1]-2;
				$('le_wrapper').setStyle({left:x+'px',top:y+'px'}).show().e = e;
			});
		});
	},

	beginedit: function(e)
	{
        var key = e.getAttribute('langKey');
		var editor = new Element('div', {'class':'leForm'}).update('<div>'+key+'</div><br><textarea>'+e.innerHTML+'</textarea><br><br>'+
        '<div><button class="save">Save</button> <button class="cancel">Cancel</button></div>');
		var me = this;
		editor.down('.save').observe('click', function(){
			me.save(e, key, editor.down('textarea').value);
            Modalbox.hide();
		})
		editor.down('.cancel').observe('click', function(){
            Modalbox.hide();
		});
        Modalbox.show(editor, {title: 'Edit Text', width: 400});
	},

	save:function(e, key, value)
	{
		var url = '[:url_admin:]/dictionary/save';
        var params = 'key='+key+'&value='+value;
        Client.ajax(url, {
            parameters: params,
            onComplete: function(response){
                e.update(value);
            }
        });
	}
});